<!DOCTYPE html>
<html>
<head>
    <title>SMACCMPilot Control Output</title>

    <!-- Bootstrap core CSS -->
    <link href="/bootstrap-3.3.4-dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Bootstrap theme -->
    <link href="/bootstrap-3.3.4-dist/css/bootstrap-theme.min.css" rel="stylesheet">
</head>
<body role="document">

    <div class="container">
    <div class="row">
    <div class="col-md-3" role="main">
    <h2>Control Outputs</h2>
    <p><button type="button" class="btn btn-sm" id="control-sch-btn">?</button>
    </p>

    </div> <!-- end column -->
    </div> <!-- end row -->
    <div class="row">
    <div class="col-md-3" role="main">

    <p>Roll:
      <span id="control-roll-progbar-lbl">?</span> </p>
    <div class="progress">
      <div class="progress-bar" role="progressbar" aria-valuenow="0"
           aria-valuemin="-1" aria-valuemax="1" style="width: 50%;"
           id="control-roll-progbar">
      </div>
    </div>
    <p>Pitch:
      <span id="control-pitch-progbar-lbl">?</span> </p>
    <div class="progress">
      <div class="progress-bar" role="progressbar" aria-valuenow="0"
           aria-valuemin="-1" aria-valuemax="1" style="width: 50%;"
           id="control-pitch-progbar">
      </div>
    </div>
    <p>Yaw:
      <span id="control-yaw-progbar-lbl">?</span> </p>
    <div class="progress">
      <div class="progress-bar" role="progressbar" aria-valuenow="0"
           aria-valuemin="-1" aria-valuemax="1" style="width: 50%;"
           id="control-yaw-progbar">
      </div>
    </div>
    <p>Throttle:
      <span id="control-throttle-progbar-lbl">?</span> </p>
    <div class="progress">
      <div class="progress-bar" role="progressbar" aria-valuenow="0"
           aria-valuemin="-1" aria-valuemax="1" style="width: 50%;"
           id="control-throttle-progbar">
      </div>
    </div>

    </div> <!-- end col-md-3 -->
    <div class="col-md-9" role="complementary">
    </div>
    </div> <!-- end row -->
    </div> <!-- end container -->
    <script src="/underscore-1.8.3.js"></script>
    <script src="/jquery-2.1.3.js"></script>
    <script src="/backbone-1.1.2.js"></script>
    <script src="/bootstrap-3.3.4-dist/js/bootstrap.min.js"></script>
    <script src="/scheduler.js"></script>
<script>
$(function() {

var ControlOutput = Backbone.Model.extend({
  urlRoot: '/controllable_vehicle_i/control_output'
});

var ControlSliderView = Backbone.View.extend({
  initialize: function (options) {
    this.selector = options.selector;
    this.model.on('change', this.render, this);
    this.$progbar = $('#control-' + this.selector + '-progbar');
    this.$label   = $('#control-' + this.selector + '-progbar-lbl');
    this.render();
  },
  render: function () {
    var val = this.model.toJSON()[this.selector] || 0;
    this.$label.html(val.toFixed(2));
    var percent = (val + 1) * 50;
    this.$progbar.css('width', percent.toString() + '%');
  }
});

var ControlView = function (opts) {
  this.roll =
    new ControlSliderView({model: opts.model, selector: 'roll'});
  this.pitch =
    new ControlSliderView({model: opts.model, selector: 'pitch'});
  this.yaw =
    new ControlSliderView({model: opts.model, selector: 'yaw'});
  this.throttle =
    new ControlSliderView({model: opts.model, selector: 'throttle'});
};

window.controlOutput = new ControlOutput({});
window.controlOutputView = new ControlView({ model: controlOutput });

window.controlOutputScheduler =
  new Scheduler({ period: false}, controlOutput);
window.controlOutputSchedulerView =
  new SchedulerButtonView({ model: controlOutputScheduler, el: '#control-sch-btn' });

});
</script>

</body>
</html>
